<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, toRef, onUnmounted } from 'vue'
import MainCenter from '@/layout/MainCenter/index.vue'
import { tagArticleList, getAllTags } from '@/api/tag'
import ArticleItem from '@/components/ArticleItem'
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { encryData, decryData } from "@/utils/utils";


const $router = useRouter()
const $route = useRoute()


let decryDataTagId = $route.query.tagId ? decryData($route.query.tagId) : 0
// console.log('解密之后的',decryDataTagId);




interface tagItem {
  tagId: number,
  tagName: string,
  tagAlias: string,
  tagDesc: string
}

/*获取全部的tag列表*/
let tagList = ref<tagItem[]>([])
let requestTagList = async () => {
  try {
    let data: any = await getAllTags()
    if (data.code == 200) {
      tagList.value = data.tags
      if (requestTagArticleConfig.tagId == 0) {
        requestTagArticleConfig.tagId = data.tags[0].tagId
      }
      requestTagArticleList()
    } else {
      message.error(data.message)
    }
  } catch (e: any) {
    message.error(e.message)
  }
}
requestTagList()


interface requestTagConfig {
  tagId: number,
  page: number,
  pageSize: number
}
// 请求配置
let requestTagArticleConfig = reactive<requestTagConfig>({
  tagId: decryDataTagId,
  page: 1,
  pageSize: 20
})

interface articleItem {
  articleId: number;
  articleTitle: string;
  articleDesc: string;
  userName: string,
  publicTime: string,
  tags: string[];
  articleCover: string
}
// 文章列表
let articleList = ref<articleItem[]>([])

let isLoading = ref<Boolean>(false)
let isHaveScrollRequest = false
let isEnd = false
let requestTagArticleList = async () => {
  isLoading.value = true
  let data: any = await tagArticleList(requestTagArticleConfig)
  isLoading.value = false
  isHaveScrollRequest = false
  if (data.articles.length == 0) {
    isEnd = true
    message.warning('没有更多了')
    return
  }
  data.articles.forEach((item:articleItem) => {
    item.articleCover = item.articleCover
  })
  console.log('当前标签列表数据',data)
  articleList.value = articleList.value.concat(data.articles)
}


let tabConfig = reactive([{
  activeId: 1,
  activeTitle: '最新'
}, {
  activeId: 2,
  activeTitle: '推荐'
}])

let scrollDom = ref()

let bindScroll = () => {
  if (!isEnd) {
    let dom = document.querySelector('.tag-container') as HTMLElement
    let { scrollHeight, clientHeight, scrollTop } = dom
    let gap = 50 // 预设距离加载
    let haveScrollHeight = scrollTop + clientHeight + gap

    // console.log('当前高度', haveScrollHeight);
    // console.log('滚动条高度', scrollHeight);

    if (haveScrollHeight >= scrollHeight) {
      if (!isHaveScrollRequest) {
        isHaveScrollRequest = true
        requestTagArticleConfig.page += 1
        requestTagArticleList()
      }
    }
  }
}

function bindScrollHandler() {
  let dom = document.querySelector('.tag-container') as HTMLElement
  dom.addEventListener('scroll', bindScroll)
}

onMounted(() => {
  bindScrollHandler()
})

// 卸载注册的事件
onUnmounted(() => {
  window.removeEventListener('scroll', bindScroll)
})

// 当改变分类时候
let changeTag = (tag: tagItem) => {
  if (tag.tagId == requestTagArticleConfig.tagId) return
  requestTagArticleConfig.tagId = tag.tagId
  requestTagArticleConfig.page = 1
  requestTagArticleConfig.pageSize = 10
  isEnd = false
  articleList.value = []
  requestTagArticleList()
}

let switchDetail = (article: articleItem) => {
  $router.push({ name: "Detail", params: { articleId: encryData(article.articleId) } })
}

</script>

<template>
  <div class="tag-container">
    <MainCenter>
      <a-row class="tag-box">
        <a-col class="tag-left" :xs="24" :sm="24" :md="24" :lg="24" :xl="16" :xxl="18">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane v-for="(item) in tabConfig" :key="item.activeId" :tab="item.activeTitle">
              <article-item @titleClicke="switchDetail(article)" :article="article"
                v-for="(article) in articleList"></article-item>
              <a-skeleton v-if="isLoading" :active="true" />
              <a-result v-if="!isLoading && articleList.length == 0 && tagList.length !== 0" title="改标签下暂未查询到文章">
                <template #icon>

                </template>
                <template #extra>
                  <img class="result-img-icon" src="@/assets/images/no-source.png" alt="">
                </template>
              </a-result>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col class="tag-right" :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :xxl="6">
          <ul class="tag-list">
            <a-skeleton v-if="tagList.length == 0" :active="true" />
            <li v-else class="tag-item" @click="changeTag(tag)"
              :class="[requestTagArticleConfig.tagId == tag.tagId ? 'tag-active-item' : '']" v-for="tag in tagList"
              :key="tag.tagId">
              {{ tag.tagName }}
            </li>
          </ul>
        </a-col>
      </a-row>
    </MainCenter>
  </div>
</template>


<style lang="scss" scoped>
.tag-container {
  height: calc(100vh - 56px);
  padding: 20px 0;
  background: #f2f3f5;
  overflow-y: auto;
}

.tag-box {}

.tag-left {
  height: max-content;
  background-color: #fff;
  padding: 1.5rem;
}

.tag-right {
  position: sticky;
  top: 0px;
  padding: 0px 1.5rem;
  height: max-content;

  .tag-list {
    padding: 10px;
    background-color: #fff;

    .tag-item {
      cursor: pointer;
      transition: .3s all;
      list-style: none;
      padding: 15px;
      color: rgba(81, 87, 103);

      &:hover {
        background-color: #f7f8fa;
        color: #1e80ff;
      }
    }

    .tag-active-item {
      color: #1e80ff;
      background-color: #eaf2ff;
    }
  }
}


::v-deep .ant-result-title {
  font-size: 16px;
  color: rgba(0, 0, 0, .55);
}

@media screen and (max-width: 768px) {
  .tag-container {
    height: calc(100vh - 56px);
    padding: 0px 0;
    background: #f2f3f5;
    overflow-y: auto;
  }

  .tag-box {
    display: flex;
    flex-direction: column-reverse;
    /* 反转方向以将右侧分类栏放在上方 */
  }

  .tag-left {
    height: max-content;
    background-color: #fff;
    padding: 0px 1.5rem 1.5rem 1.5rem;
  }

  .tag-right {
    position: sticky;
    top: 0px;
    padding: 0px 0rem;
    height: max-content;
    margin-bottom: 0rem !important;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    /* 添加底部间距以与内容区域分隔开 */

    .tag-list {
      display: flex;
      padding: 10px 10px 10px 10px;
      background-color: #fff;
      margin-bottom: 0rem !important;
      width: max-content;

      .tag-item {
        cursor: pointer;
        transition: .3s all;
        list-style: none;
        padding: 15px;
        color: rgba(81, 87, 103);

        &:hover {
          background-color: #f7f8fa;
          color: #1e80ff;
        }
      }

      .tag-active-item {
        position: relative;
        color: #1e80ff !important;
        background-color: #ffffff !important;
        &::after {
          position: absolute;
          content: "";
          width: 60%;
          height: 3px;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0px;
          background-color: #1e80ff;
          border-radius: 12px;
        }
      }
    }
  }
  .result-img-icon {
    width: 100%;
  }
}</style>

